<#assign parameters = tag.parameters/>
<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" data-icon="${inputValue?default("fa-navicon")}"
                id="iconpicker-${tag.id}"></button>
    </span>
<#include "/${parameters.theme}/hidden.ftl"/>
</div>
<script>
    $('#iconpicker-${tag.id}').iconpicker({
        arrowClass: 'btn-danger',
        arrowPrevIconClass: 'fa fa-arrow-left',
        arrowNextIconClass: 'fa fa-arrow-right',
        cols: 10,
        footer: true,
        header: true,
        iconset: '${parameters.iconset?default('fontawesome')}',
        placement: 'bottom', // Only in button tag
        rows: 5,
        search: true,
        searchText: 'Search',
        selectedClass: 'btn-success',
        unselectedClass: ''
    });
    $('#iconpicker-${tag.id}').on('change', function (e) {
        $('#${tag.id}').val(e.icon)
    });
</script>
